<template>
  <div>
     <Card ref="card">
      <p slot="title">接口日志</p>
      <a href="#" slot="extra" @click.prevent="GetLog()">刷新</a>
     <Row :gutter="16">
      <Col span="3">
        <Select
          v-model="logType"
          size="large"
          placeholder="全部日志"
          style="width:100px;margin-right:20px"
        >
          <Option v-for="item in logList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </Col>
      <Col span="8">
        <Button @click="exportData" type="primary" style="margin: 0 10px 10px 0;">导出日志记录</Button>
         <Button @click="DeleteLog" type="primary" style="margin: 0 10px 10px 0;">清空日志记录</Button>
      </Col>

    </Row>
    </Card>   

    <Table border ref="table" :height="tableHeight" :columns="columns" :data="errorList" ></Table>
  </div>
</template>

<script>
import dayjs from "dayjs";
import { GetLog, DeleteLog } from "@/api/data";
import { mapMutations } from "vuex";
export default {
  name: "api_error_logger_page",
  data() {
    return { 
      tableHeight:450, 	  
      logList: [
        {
          label: "全部日志",
          value: ""
        },
        {
          label: "Error",
          value: "Error"
        },
        {
          label: "Debug",
          value: "Debug"
        },
        {
          label: "Trace",
          value: "Trace"
        },
        {
          label: "Info",
          value: "Info"
        }
      ],
      logType: "",
      columns: [
        {
          type: "index",
          title: "序号",
          width: 100
        },
        {
          key: "Timestamp",
          title: "时间",
           width: 200,
          render: (h, { row }) => {
            return (
              <span>{dayjs(row.Timestamp).format("YYYY-MM-DD HH:mm:ss")}</span>
            );
          },
        },
        {
          key: "Level",
          title: "类型",
          width: 100
        },
        {
          key: "Message",
          title: "详情"
        },      
      ],
      errorList: []
    };
  },
  watch: {
    logType: function(newQuestion, oldQuestion) {
      this.GetLog();
    }
  },
  computed: {},
  methods: {
    GetLog() {
      let vm = this;
      GetLog(this.logType).then(res => {
        const data = res.data;
        if (data.Type == 1) {
          vm.errorList = data.Data;
        } else {
          this.$Message.error(data.Message);
        }
      });
    },
    DeleteLog() {
      let vm = this;
      this.$Modal.confirm({
        title: "提示",
        content: "确定要清空日志记录吗？",
        onOk: () => {
          DeleteLog().then(res => {
            this.GetLog();
          });
        },
        onCancel: () => {}
      });
    },
    exportData() {
      this.$refs.table.exportCsv({
        filename: "日志.csv"
      });
    }
  },
  mounted() {
    	    var cardHeight = this.$refs.card.$el.offsetHeight;  
    this.tableHeight =
      window.innerHeight - cardHeight-160;
    this.GetLog();
  }
};
</script>

<style>
</style>
